<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: 张磊
 * @Date: 2020-11-10 22:29:25
 * @LastEditors: 张磊
 * @LastEditTime: 2020-11-12 19:56:21
 * @FilePath: \rank_tree\src\components\Vudio.vue
-->
<template>
  <dl @click="goVideo(item)">
    <dt>
      <video
        id="my-video"
        :src="item.video"
        controls=""
        :poster="item.image"
        preload="none"
        webkit-playsinline="true"
        playsinline="true"
        x5-playsinline
        x5-video-player-type="h5"
        x5-video-player-fullscreen="true"
        x5-video-orientation="portraint"
        style="object-fit: fill"
      ></video>
    </dt>
    <dd>
      <h5>{{ item.title.slice(0, 7) + "..." }}</h5>
      <p>
        <span>作者：{{ item.nickname }}</span
        ><span>推荐值：{{ item.score }}</span>
      </p>
    </dd>
  </dl>
</template>
<script>
import { useRoute, useRouter } from "vue-router";

export default {
  props: ["item"],
  setup() {
    let Router = useRouter();
    function goVideo(item) {
      if (item.url) {
        window.location.href = item.url;
      } else if (item.video) {
        let url = encodeURIComponent(item.video);
        Router.push(`/vdetail/${url}`);
      }
    }
    return {
      goVideo,
    };
  },
  
};
</script>
<style lang="scss" scoped>
dl {
  padding: 0.2rem;
  dt {
    width: 100%;
    #my-video {
      width: 100%;
      height: 12rem;
    }
  }
  dd {
    h5 {
      text-align: left;
      font-weight: bold;
    }
    p {
      display: flex;
      margin-top: 0.2rem;
      justify-content: space-between;
      font-size: 0.24rem;
    }
  }
}
</style>